<template>
	<div class="user-page">
		<!--查询表单-->
		<el-card class="box-card mb10" shadow="never">
			<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="75px" :model="searchForm">
				<el-row :gutter="30" justify="start">
					<el-col :span="6">
						<el-form-item class="form-item" label="应用ID:" prop="appId">
							<el-input v-model="searchForm.appId" placeholder="请输入应用AppId" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="应用名称:" prop="name">
							<el-input v-model="searchForm.name" placeholder="请输入应用名称" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="应用状态:" prop="appStatus">
							<el-select v-model="searchForm.appStatus" class="el-form-item" clearable placeholder="请选择应用状态">
								<el-option label="启用" value="1" />
								<el-option label="停用" value="2" />
							</el-select>
						</el-form-item>
					</el-col>
					<template v-if="!searchMore">
						<el-col :span="6">
							<el-form-item class="form-item" label="应用类型:" prop="appType">
								<el-select v-model="searchForm.appType" class="el-form-item" clearable placeholder="请选择应用类型">
									<el-option label="API接口" value="1" />
									<el-option label="统一认证" value="2" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" label="所属单位:" prop="subject">
								<el-input v-model="searchForm.subject" placeholder="请输所属单位" />
							</el-form-item>
						</el-col>
					</template>
					<el-col :span="6">
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
							<a class="more-search" @click="searchMore = searchMore ? false : true">
								{{ searchMore ? '展开' : '收起' }}
								<el-icon>
									<component :is="searchMore ? 'ele-ArrowDown' : 'ele-ArrowUp'" color="#0052CC" />
								</el-icon>
							</a>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card class="box-card" shadow="never">
			<static-table :tableData="tableData" :loading="loading" :seqConfig="{ startIndex: (pageNum - 1) * pageSize }">
				<template #vux-search>
					<el-row :gutter="12" class="mb10">
						<el-button class="ml8" type="primary" v-has="'system:auth:app:add'" @click="handleAdd">
							<el-icon><ele-Plus /></el-icon>
							&nbsp;新增
						</el-button>
					</el-row>
				</template>
				<template #vux-column>
					<vxe-column type="seq" title="序号" width="60" />
					<vxe-column field="appId" min-width="140" show-overflow="tooltip" title="应用ID" />
					<vxe-column field="name" min-width="120" show-overflow="tooltip" title="应用名称" />
					<vxe-column field="pubKey" min-width="120" show-overflow="tooltip" title="应用公钥" />
					<vxe-column field="appStatus" min-width="120" title="应用状态">
						<template #default="{ row }">
							<span class="mr10">{{ row.appStatus == '1' ? '启用' : '停用' }}</span>
							<el-switch v-has="'system:auth:app:update'" active-color="#00B42A" inactive-color="#F04141" :model-value="row.appStatus == '1' ? true : false" @change="handleSwitch(row)" />
						</template>
					</vxe-column>
					<vxe-column field="onlineStatus" min-width="120" title="是否在线">
						<template #default="{ row }">
							<el-tag :type="row.onlineStatus ? 'success' : 'danger'">{{ row.onlineStatus ? '在线' : '离线' }}</el-tag>
						</template>
					</vxe-column>
					<vxe-column field="accessTimeLimit" min-width="120" show-overflow="tooltip" title="限制时间" />
					<vxe-column field="limitLoginNum" min-width="120" show-overflow="tooltip" title="限制次数" />
					<vxe-column field="alreadyLoginNum" min-width="120" show-overflow="tooltip" title="已登录次数" />
					<vxe-column field="callbackUrl" min-width="150" show-overflow="tooltip" title="回调地址" />
					<vxe-column field="ipWhites" min-width="150" show-overflow="tooltip" title="IP白名单" />
					<vxe-column field="linkPerson" min-width="100" show-overflow="tooltip" title="联系人员" />
					<vxe-column field="linkPhone" min-width="100" show-overflow="tooltip" title="联系电话" />
					<vxe-column field="appDesc" min-width="120" show-overflow="tooltip" title="应用描述	" />
					<vxe-column field="createTime" min-width="150" title="创建时间" />
					<vxe-column field="operation" fixed="right" min-width="120" title="操作">
						<template #default="{ row }">
							<div class="vxe-action">
								<a v-has="'system:app:update'" @click="handleUpdate(row)">修改</a>
								<el-dropdown v-has-only="['system:auth:app:config', 'system:auth:app:reset', 'system:auth:app:outline']" class="mt4 ml10">
									<span class="el-dropdown-link">
										更多
										<i class="alifont ali-pk-down-arrow" style="color: #0052cc; font-size: 12px" />
									</span>
									<template #dropdown>
										<el-dropdown-menu>
											<div v-has="'system:auth:app:config'" @click="handlePermConfig(row)"><el-dropdown-item>权限设置</el-dropdown-item></div>
											<div v-has="'system:auth:app:reset'" @click="handleResetPwd(row)"><el-dropdown-item>重置秘钥</el-dropdown-item></div>
											<div v-has="'system:auth:app:outline'" @click="handleOutline(row)" v-if="!row.onlineStatus"><el-dropdown-item>强制下线</el-dropdown-item></div>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</template>
					</vxe-column>
				</template>
			</static-table>
			<el-pagination background :current-page="pageNum" :layout="layout" :page-size="pageSize" :total="dataCount" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
		</el-card>
		<EditAppModal ref="editModalRef" @peak-modal-ok="handleModalOk" />
	</div>
</template>
<script name="AppManage" setup>
import global from '@/utils/global'
import useTableList from '@/hooks/useTableList'
import useModal from '@/hooks/useModal'
const EditAppModal = defineAsyncComponent(() => import('./leafPages/EditAppModal.vue'))

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-28 10:11:35
 */
const router = useRouter()
const state = reactive({
	searchForm: {
		appId: '',
		name: '',
		subject: '',
		appStatus: '',
		appType: '1',
	},
	resetPwdModalRef: null,
	searchFormRef: null,
})
const { searchForm, searchFormRef } = toRefs(state)

const queryUrl = '/meta-system/web/v1/authApplication/list'
const { loading, dataCount, searchMore, handleInitQuery, handleModalOk, tableData, pageNum, pageSize, layout, handleSizeChange, handleCurrentChange } = useTableList(queryUrl, state.searchForm)

const { editModalRef, handleAdd, handleUpdate } = useModal()

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-28 10:16:03
 */
const handleSearch = () => {
	handleInitQuery()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	handleInitQuery()
}
const handleResetPwd = row => {
	global.$baseConfirm(`是否确认重置当前应用的密钥?`, '提示', () => {
		global.$fetchGetData(`/meta-system/web/v1/authApplication/resetSecret`, { id: row.id }).then(data => {
			if (data.code == 200) {
				global.$baseMessage(data.data, 'warning')
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	})
}
const handleOutline = row => {
	global.$baseConfirm(`是否确认强制下线当前应用?`, '提示', () => {
		global.$fetchGetData(`/meta-system/web/v1/authApplication/forceOffline`, { id: row.id }).then(data => {
			if (data.code == 200) {
				global.$baseMessage(data.msg, 'success')
				handleModalOk(2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	})
}
//switch 切换
const handleSwitch = row => {
	global.$baseConfirm(`是否确认更改名称为"--【${row.name}】--"的状态?`, '提示', () => {
		const user = {}
		user.businessId = row.id
		user.status = row.appStatus == 1 ? 2 : 1
		global.$fetchPostData(`/meta-system/web/v1/authApplication/changeStatus`, user).then(data => {
			if (data.code == 200) {
				global.$baseMessage(data.msg, 'success')
				handleModalOk(2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	})
}
const handlePermConfig = row => {
	router.push({
		path: '/system/auth/app/config',
		query: {
			id: row.appId,
		},
	})
}
</script>
<style lang="scss" scoped></style>
